﻿import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

Item {

    id: root

    property string title: ""
    property int titleWidth: title === "" ? 0: 80*dp
    property int editWidth: 180*dp

    property int popHeight: 170*dp



    property string date: "2024-10-25"




    property var modelYear: []
    property var modelMonth: []
    property var modelDay: []

    Component.onCompleted: {
        for(let y = 2024; y <= 2099; y ++){
            modelYear.push(y)
        }for(let m = 1; m <= 12; m ++){
            modelMonth.push(m)
        }for(let d = 1; d <= 31; d ++){
            modelDay.push(d)
        }
        modelYearChanged()
        modelMonthChanged()
        modelDayChanged()
        setText(date)
    }


    height: 40*dp
    width: titleWidth + editWidth


    function getText(){
        return date
    }
    function setText(text){
        date = text
        updateList()
    }

    property bool dateMutex: false
    function updateList(){
        dateMutex = true
        list_year.setValue(Number(date.split("-")[0]))
        list_month.setValue(Number(date.split("-")[1]))
        list_day.setValue(Number(date.split("-")[2]))
        dateMutex = false
    }


    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: config.fontsize
            x: 0
            anchors.verticalCenter: parent.verticalCenter
        }

    }

    ComboBox{
        id: control
        height: parent.height
        width: editWidth
        x: titleWidth

        contentItem: Text{
            text: "   " + date
            font.pixelSize: config.fontsize
            verticalAlignment: Text.AlignVCenter
        }

        background: Rectangle{
            anchors.fill: parent
            border.color: "#CCCCCC"
            radius: 3*dp
            Image {
                x: parent.width-35*dp; y: 5*dp
                height: root.height-10*dp; width: root.height-10*dp
                source: "qrc:/picture/rq.png"
            }
        }
        indicator: Item{

        }


        popup: Popup{
            id: popup
            width: control.width
            height: popHeight
            y: control.height + 2*dp
            contentItem: Rectangle{
                radius: 3*dp
                height: popHeight;  width: control.width
                clip: true
                CustomComboCalendarDateListView{
                    id: list_year
                    height: parent.height; width: parent.width * 0.33
                    model: modelYear
                    onItemChanged: {
                        if(dateMutex)  return
                        date = list_year.item.toString()+"-"+list_month.item.toString()+"-"+list_day.item.toString()
                    }
                }
                CustomComboCalendarDateListView{
                    id:list_month
                    x: parent.width * 0.33
                    height: parent.height; width: parent.width * 0.33
                    model: modelMonth
                    onItemChanged: {
                        if(dateMutex)  return
                        date = list_year.item.toString()+"-"+list_month.item.toString()+"-"+list_day.item.toString()
                    }
                }
                CustomComboCalendarDateListView{
                    id: list_day
                    x: parent.width * 0.66
                    height: parent.height; width: parent.width * 0.33
                    model: modelDay
                    onItemChanged: {
                        if(dateMutex)  return
                        date = list_year.item.toString()+"-"+list_month.item.toString()+"-"+list_day.item.toString()
                    }
                }
            }

            // popup的背景
            background: Rectangle {
                clip: true
                radius: 3*dp
                border.color: "#CCCCCC"
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }
            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }




}
